<template>
    <n-card
          hoverable
          @click="setIdentity"
    >
            <div v-if="identity === 'school'" class="card-content">
                <n-icon size="65">
                    <school />
                </n-icon>
                <div class="blank"/>
                <n-gradient-text
                      type="primary"
                      size="30"
                >
                    我是学校
                </n-gradient-text>
            </div>
            <div v-else-if="identity === 'student'" class="card-content">
                <n-icon size="65">
                    <md-school />
                </n-icon>
                <div class="blank"/>
                <n-gradient-text
                      type="primary"
                      size="30"
                >
                    我是学生
                </n-gradient-text>
            </div>
            <div v-else class="card-content">
                <n-icon size="65">
                    <account-balance-sharp />
                </n-icon>
                <div class="blank"/>
                <n-gradient-text
                      type="primary"
                      size="30"
                >
                    我是企业
                </n-gradient-text>
            </div>
    </n-card>
</template>

<script>
import { School } from '@vicons/fa'
import { MdSchool } from '@vicons/ionicons4'
import { AccountBalanceSharp } from '@vicons/material'
export default {
    name: 'IdentityCard',
    props: {
        identity: {
            type: String,
            default: ''
        }
    },
    components: {
        School,
        MdSchool,
        AccountBalanceSharp
    },
    methods: {
        setIdentity() {
            this.$store.commit('setIdentity', this.identity)
            this.$router.push({ name: 'login'})
        }
    }
}
</script>

<style scoped lang="less">
.card-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.n-card {
    width: 300px;
    height: 300px;
}
.blank {
    height: 20%;
}
</style>